{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"发布服务",back:1} %}
    <mu-form ref="form" :model="en" class="mu-demo-form">


        <div>
            {#1 选择类目#}
            <div class="pad5 bc13">
                <div class="bcf pad6 round3 bdbda fs9  c11">
                    <mu-form-item prop="cat1" label="选择行业" :rules="[rules.notNull]">
                        <div class="flex2 tac scrollX-Box">
                            <div class="scrollX-Item pad5 mar2 bdso pos-r" :class="cat1 == item.id ? 'bc13 c11':'bcf'"
                                 v-for="item in cats">
                                <div>
                                     <img :src="picUrl(item.pic)" class="wh20-20" alt="" onerror="this.src=pic404">
                                </div>
                                <div class="tac"> [[item.name]]</div>
                                <mu-ripple @click="setCat1(item.id)"></mu-ripple>
                            </div>
                        </div>
                    </mu-form-item>
                </div>
                {#                <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11">#}
                {#                    <div class="flex2 tac scrollX-Box">#}
                {#                        <div class="scrollX-Item pad5 mar2 bdso pos-r" :class="cat1 == item.id ? 'bc13 c11':'bcf'"#}
                {#                             v-for="item in cats">#}
                {#                            <div>#}
                {#                                 <img :src="item.pic" class="wh20-20" alt="" onerror="this.src=pic404">#}
                {#                            </div>#}
                {#                            <div class="tac"> [[item.name]]</div>#}
                {#                            <mu-ripple @click="setCat1(item.id)"></mu-ripple>#}
                {#                        </div>#}
                {#                    </div>#}
                {#                </div>#}
                <div class="bcf pad6 round3 bdbda fs9  c11" v-if="isTrue(cat1)">
                    {#                    选择分类#}
                    <mu-form-item prop="cat2" label="选择分类" :rules="[rules.notNull]">
                        <div class="scrollX-Box" v-for="item,index in cats">
                            <div :id="'item' + item.id" class="" v-if="cat1 == item.id">
                                <div class="scrollX-Box">
                                    <div class="scrollX-Item bcf pad5 mar2 bdso pos-r" v-for="row in item.sons"
                                         :class="cat2 == item.id + '_' + row.id ? 'bc13 c11':'bcf'">
                                        <div> <img :src="picUrl(row.pic)" class="wh20-20" alt="" onerror="this.src=pic404"></div>
                                        <div class="tac"> [[row.name]]</div>
                                        <mu-ripple @click="setCat2(row.id)"></mu-ripple>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </mu-form-item>
                </div>
                {#                <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">#}
                {#                    <div class="">#}
                {#                        <div class="" v-for="item,index in cats">#}
                {#                            <div :id="'item' + item.id" class="" v-show="cat1 == item.id">#}
                {#                                <div class="scrollX-Box">#}
                {#                                    <div class="scrollX-Item bcf pad5 mar2 bdso pos-r" v-for="row in item.sons"#}
                {#                                         :class="cat2 == item.id + '_' + row.id ? 'bc13 c11':'bcf'">#}
                {#                                        <div> <img :src="row.pic" class="wh20-20" alt="" onerror="this.src=pic404"></div>#}
                {#                                        <div class="tac"> [[row.name]]</div>#}
                {#                                        <mu-ripple @click="setCat2(row.id)"></mu-ripple>#}
                {#                                    </div>#}
                {#                                </div>#}
                {#                            </div>#}
                {#                        </div>#}
                {#                    </div>#}
                {#                </div>#}
            </div>
            {#3 服务内容#}
            <div class=" bc13 pad5">
                <div class="bcf pad6 round3 bdbda fs9  c11">
                    {#                    服务标题#}
                    <mu-form-item prop="name" label="服务标题" :rules="[rules.notNull , rules.max(20),rules.min(2)]">
                        <mu-text-field v-model="en.name" max-length="20" full-width place
                                       placeholder="简单描述服务内容20字符以内"></mu-text-field>
                    </mu-form-item>
                </div>
                {#                <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">#}
                {#                    <mu-text-field v-model="title" max-length="20" full-width#}
                {#                                   help-text="简单描述服务内容20字符以内"></mu-text-field>#}
                {#                </div>#}
                <div class="bcf pad6 round3 bdbda fs9 mart5 c11">
                    {#                    服务说明/注意事项/备注#}
                    <mu-form-item prop="intro" label="服务说明/注意事项/备注"
                                  :rules="[rules.notNull , rules.max(200),rules.min(10)]">
                        <mu-text-field v-model="en.intro" full-width multi-line :rows="6"
                                       max-length="200" :rows-max="10"
                                       placeholder="服务内容，注意事项，有什么叮嘱师傅的也可以说哦！"></mu-text-field>
                    </mu-form-item>
                </div>
                {#                <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">#}
                {#                    <mu-text-field v-model="content" full-width multi-line :rows="6"#}
                {#                                   max-length="200" :rows-max="10" placeholder="服务内容，注意事项，有什么叮嘱师傅的也可以说哦！"></mu-text-field>#}
                {#                </div>#}

                {#                <div class="bcf pad6 round3 bdbda fs9 mart5 c11 flrc">#}
                {#                    <div>价格</div>#}
                {#                    <div class="flex1"><input class="inputPlain tac" type="text" placeholder="请输入价格"></div>#}
                {#                    <div>单位</div>#}
                {#                    <div class="flex1"><input class="inputPlain tac" type="text" placeholder="次、天、小时等"></div>#}
                {#                </div>#}

                <div class="bcf padlr6 padt5 round3 bdbda fs9 mart5 c11 flrc">
                    <div class="flex1">
                        <mu-form-item label-position="left" prop="price" label="价格"
                                      :rules="[rules.notNull,rules.isNum]">
                            <mu-text-field v-model="en.price" full-width place placeholder="请输入价格"></mu-text-field>
                        </mu-form-item>
                    </div>
                    <div class="flex1">
                        <mu-form-item label-position="left" prop="unit" label="单位"
                                      :rules="[rules.notNull,rules.min(1)]">
                            <mu-text-field v-model="en.unit" full-width place placeholder="次、天、小时等"></mu-text-field>
                        </mu-form-item>
                    </div>
                    {#                    <div>价格</div>#}
                    {#                    <div class="flex1"><input class="inputPlain tac" type="text" placeholder="请输入价格"></div>#}
                    {#                    <div>单位</div>#}
                    {#                    <div class="flex1"><input class="inputPlain tac" type="text" placeholder="次、天、小时等"></div>#}
                </div>
            </div>

            {#4 图片资料#}
            <div class="pad5 bc13">
                <div class="bcf pad6 round3 bdbda fs9  c11">
                    {#                    图片详情#}
                    <mu-form-item prop="pics" label="图片详情" :rules="[rules.notNull]">
                        <div class="scrollX-Box flex-start bcf pad5">
                        </div>
                        <div class="w100 pos-r" v-for="item,index in pics">
                             <img :src="item" class="w100 scrollX-Item" alt="" onerror="this.src=pic404">
                            <div class="pos-a r0 t0 flrc op9">
                                <mu-button fab small color="black" @click="move(index,-1)">
                                    <mu-icon value="arrow_upward"></mu-icon>
                                </mu-button>
                                <mu-button fab small color="black" @click="move(index,1)">
                                    <mu-icon value="arrow_downward"></mu-icon>
                                </mu-button>
                                <mu-button fab small color="black" @click="del(index)">
                                    <mu-icon value="close"></mu-icon>
                                </mu-button>
                            </div>
                        </div>
                        <div class="pos-r pad10 c12 bdso round5 w100 mart5 tac">
                            <mu-ripple @click="selectPic()">+添加图片</mu-ripple>
                        </div>
                    </mu-form-item>
                </div>
            </div>
        </div>

        <div class="pad10">
            <mu-button @click="submit()" large :color="c1" round full-width>确认发布</mu-button>
        </div>

    </mu-form>


{% endblock %}

    {% block myJs %}

        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/crypto/crypto.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/hmac/hmac.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/sha1/sha1.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/base64.js"></script>
        {#<script type="text/javascript" src="{{ root }}/assets/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>#}
        <script type="text/javascript" src="{{ root }}/assets/oss/uploadMy.js{{ rnd }}"></script>
    {% endblock %}
